<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="music-head" :style="{color,marginTop:navTop+'px'}">
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="music-head" :style="{color}">
	<!-- #endif -->
		<view class="music-head-icon" :class="{'music-head-iconBlack':iconBlack}" v-if="icon" :style="{top:navIconTop+'px'}">
			<text class="iconfont iconzuojiantou-copy" @tap="handleToBack"></text> | <text class="iconfont iconshouye" @tap="handleToHome"></text>
		</view>
		{{title}}
	</view>
</template>
<script>
	export default{
		props:['title','icon','color','iconBlack'],
		data(){
			return{
				navTop:0,
				navIconTop:0,
			}
		},
		mounted(){
			const query = uni.createSelectorQuery().in(this);
			let musicHead;
			query.select('.music-head').boundingClientRect(data => {
				musicHead=data;
			}).exec();
			// #ifdef MP-WEIXIN
			let menuButtonInfo =uni.getMenuButtonBoundingClientRect();
			query.select('.music-head').boundingClientRect(data => {
				this.navTop=menuButtonInfo.top+menuButtonInfo.height/2-data.height/2;
				musicHead=data;
			}).exec();
			// #endif
			if(this.icon){
			query.select('.music-head-icon').boundingClientRect(data=>{
				this.navIconTop=musicHead.height/2-data.height/2;
			}).exec();
			}
		},
		methods:{
			handleToBack(){
				uni.navigateBack()
			},
			handleToHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.music-head{
		width: 100%;
		height: 75px;
		font-size: 16px;
		line-height: 75px;
		text-align: center;
		color:black;
		position:relative;
	}
	.music-head-icon{
		position: absolute;
		left: 8px;
		// top: 26px;
		width: 90px;
		height: 31px;
		background: rgb(0,0,0,0.4);
		color:white;
		line-height: 31px;
		border-radius: 15px;
		display: flex;
		justify-content: space-evenly;
	}
	.music-head-iconBlack{
		color: black;
		box-sizing: border-box;
		border: 1px solid #eee;
		background: white;
	}
</style>